<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>2.Jq修改和获取页面元素</title>
<link rel="stylesheet" type="text/css" href="../public/public.css"/>
<style>
    .ui-input{
        width:300px; height:40px; border:1px solid #ccc; line-height: 40px; padding-left:10px; margin-bottom:10px;
    }
    .ui-textarea{
        width:400px; height:80px; border:1px solid #ccc; line-height: 200%; padding: 10px; margin-bottom:10px;
    }
    .ui-button{
        width:auto; display: inline-block; height:40px; line-height: 40px; padding:0px 20px; cursor: pointer;
    }
    .ui-div{
        line-height: 200%; color:#666;
    }
    .box{
        padding:35px;
    }
    .wen-ti{
        line-height: 40px;
    }
    
</style>
</head>

<body>
    <Br><Br>
<h1 class="h1-text">案例2-Jq修改和获取页面元素</h1>
<div class="div-des">
    
    <h2 class="name">用到的Jquery知识点：</h2>
    <p class="des">
        Jqery内置的方法如下 ：<Br />
        &nbsp;&nbsp;&nbsp;&nbsp;1.修改或获取元素的内容： html() ;<Br />
        &nbsp;&nbsp;&nbsp;&nbsp;2.修改或获取input、textarea等标签的value val()；<Br />
    </p>
</div>
<Br><Br><Br><Br><Br>

<h1 class="h2-text">1:修改或获取元素的内容 html()</h1>
<div class="box">
    <div class="ui-div" id="myDiv">我是一个div的内容，渣渣看到了么？</div><Br />
    <button class="ui-button" id="getDivBtn">获取Div的值</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button class="ui-button" id="setDivBtn">修改Div的值为“渣渣，开心就好！”</button>
</div>
    
<Br><Br><Br><Br><Br>
<h1 class="h2-text">2:获取修改input、textarea的value  val()</h1>
<div class="box">
    <input type="text" class="ui-input" id="uiInput" /><Br />
    <button class="ui-button" id="getInputBtn">获取input的值</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button class="ui-button" id="setInputBtn">修改input的值为“渣渣，开心就好！”</button>
    <Br /><Br /><Br />
    <div class="wen-ti">作业：渣渣，你好，你可能需要完成textarea 的获取和修改操作！</div>
    <textarea class="ui-textarea"></textarea><Br />
    <button class="ui-button">获取textarea的值</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button class="ui-button">修改textarea的值为“渣渣，开心就好！”</button>
</div>
    
<Br><Br><Br><Br><Br>
<script type="text/javascript" src="../public/jquery.js"></script>
<script>
	$(function(){
		//申明Jquery固定的函数，Js代码都写在这个Function 里面
        
        /**----------修改或获取元素的内容------------*/
        //获取Div
        $("#getDivBtn").click(function(){
            var htmlDemo = $("#myDiv").html(); //获取div里面的内容
            alert(htmlDemo);
        });
        
        //设置Div
        $("#setDivBtn").click(function(){
            $("#myDiv").html("渣渣，开心就好！我被你修改了"); //设置div  一步就可以设置完成，就是这么简单！
        });
        
        
        
        /**----------获取修改input的value------------*/
        $("#getInputBtn").click(function(){
            var val = $("#uiInput").val(); //获取div里面的内容
            if(!val){
                val = "渣渣，里面是空的，因为还没输入或通过val()设置文字！";
            }
            alert(val);
        });
        
        $("#setInputBtn").click(function(){
            $("#uiInput").val("渣渣，开心就好！我被你修改了"); //设置div  一步就可以设置完成，就是这么简单！
        });
        
        
        
        
        
	})

</script>
</body>
</html>
